<template>
  <div class="student-body">
        <h2 class="box_tit">
            <i class="icon icon1"></i>教学支付支持计划
            <i class="reti"></i>
        </h2>
        <!-- <div class="blank20"></div> -->
        <el-form :inline="true" :model="queryFormData" class="demo-form-inline" @keyup.enter="onSubmit" label-width="60px">
          <div  class="components_searchs">
              <el-form-item label="院校：">
                <el-select v-model="queryFormData.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                        <el-option v-for="school in schoolList" :key="school.id" :label="school.text" :value="school.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学院：">
                <el-select v-model="queryFormData.secondSchoolId" filterable clearable placeholder="请选择学院" @change="changeSecondSchool">
                        <el-option v-for="secondSchool in secondSchoolList" :key="secondSchool.id" :label="secondSchool.text" :value="secondSchool.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="专业：">
                <el-select v-model="queryFormData.professionId" filterable clearable placeholder="请选择专业">
                        <el-option v-for="profession in professionList" :key="profession.id" :label="profession.text" :value="profession.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" icon="el-icon-view"
                    @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>
            </el-form-item>
          </div>
          <div  v-if="advancedSearchState"  class="components_searchs" @keyup.enter="onSubmit">
             <el-form-item label="学期：">
                <el-select v-model="queryFormData.semester" filterable clearable placeholder="请选择学期">
                        <el-option v-for="semester in semesterList" :key="semester.value" :label="semester.name" :value="semester.value"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="年级：">
                <el-select v-model="queryFormData.grade" filterable clearable placeholder="请选择年级">
                        <el-option v-for="grade in gradeList" :key="grade.value" :label="grade.name" :value="grade.value"></el-option>
                </el-select>
            </el-form-item>
          </div>
        </el-form>
        <div class="scrollBarX">
                <vue-table
                      :api-url="teachSupportTable.apiUrl"
                      :fields="teachSupportTable.fields"
                      :appendParams="queryFormData"
                      :content="self"
                      ref="teachSupportTable">
                </vue-table>
        </div>
        <teach-support-add ref="teachSupportAdd"></teach-support-add>
        <teach-support-edit ref="teachSupportEdit"></teach-support-edit>
        <teach-support-detail ref="teachSupportDetail"></teach-support-detail>
  </div>
</template>
<script>
  import teach_support_add from './teach-support-add'
  import teach_support_edit from './teach-support-edit'
  import teach_support_detail from './teach-support-detail'
    export default{
      components:{
        "teach-support-add":teach_support_add,
        "teach-support-edit":teach_support_edit,
        "teach-support-detail":teach_support_detail
      },
        data(){
            return {
                self:this,
                advancedSearchState:false,
                queryFormData:{
                  schoolId:null,
                  secondSchoolId:null,
                  professionId:null,
                  semester:null,
                  grade:null
                },
                schoolList:[],
                secondSchoolList:[],
                professionList:[],
                semesterList:[],
                gradeList:[],
                dialogName:null,
                teachSupportTable: {
                    apiUrl: api.teachSupport.query,
                    fields: [{
                            prop: "__index",
                            label: "序号",
                        },{
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "grade",
                            label: "年级",
                            formatter:function(row, column, cellValue){
                                return cellValue + '级';
                            }
                        },
                        {
                            prop: "semester",
                            label: "学期",
                        },
                        {
                            prop: "courseName",
                            label: "课程",
                         },
                       {
                            prop: "teacherName",
                            label: "教师",
                        },
                        {
                            prop: "attachmentName",
                            label: "教学大纲",
                        },
                        {
                            prop: "teachSupportBase.stateText",
                            label: "状态",
                            formatter:function(row, column, cellValue){
                                return cellValue== null ? "未填报": cellValue;
                            }
                        },
                        {
                            prop: "__component",
                            label: "操作",
                            componentName:"teachSupport"
                        },
                    ],
                },
            }
        },
        created(){
          this.getSchoolList();
          this.getSemesterList();
          this.getGradeList();
        },
        methods:{
            showDialogTeachAdd(row){
              this.$refs.teachSupportAdd.showDialog(row);
            },
            showDialogTeachEdit(row){
              this.$refs.teachSupportEdit.showDialog(row);
            },
            showDialogTeachDetail(row){
              this.$refs.teachSupportDetail.showDialog(row);
            },
            onSubmit(){
                this.$refs.teachSupportTable.$emit('vuetable:refresh')
            },
            resertSearch(){
              let self = this;
              self.queryFormData.schoolId = null;
              self.queryFormData.secondSchoolId = null;
              self.queryFormData.professionId = null;
              self.queryFormData.semester = null;
              self.queryFormData.grade = null;
              this.$refs.teachSupportTable.$emit('vuetable:refresh')
            },
            getSemesterList(){
                let self = this;
                this.getDictsQueryByType("semester_type",
                  (response)=>{
                    self.semesterList = JSON.parse(JSON.stringify(response.data.data));
                  });
            },
            getGradeList(){
                let self = this;
                this.getDictsQueryByType("grade",
                  (response)=>{
                    self.gradeList = JSON.parse(JSON.stringify(response.data.data));
                  })
            },
            //获取学校
            getSchoolList(){
                let vm = this;
                vm.axios.get(api.getSchoolList).then((response) => {
                    if (response.data.success) {
                        this.schoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //学校监听
            changeSchool(schoolId){
                this.queryFormData.secondSchoolId = null;
                this.queryFormData.professionId=null;
                this.secondSchoolList = [];
                this.professionList = [];

                this.getSecondSchoolList(schoolId);
            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList,{
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        vm.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            //二级学校监听
            changeSecondSchool(secondSchoolId){
                let schoolId = this.queryFormData.schoolId;
                this.queryFormData.professionId=null;
                this.professionList = [];
                this.getProfessionlList(schoolId,secondSchoolId);
            },
            //获取筛选后的专业
            getProfessionlList(schoolId,secondSchoolId){
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                     params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            getDictsQueryByType(type,success){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl,{
                    params: {
                        type: type
                    }
                }).then((response) => {
                    success(response);
                });
            },
            // 关闭所有弹出层
            closeAllModal(){
                if(this.$refs.teachSupportAdd.state = true){
                    this.$refs.teachSupportAdd.state = false;
                }
                if(this.$refs.teachSupportEdit.state = true){
                    this.$refs.teachSupportEdit.state = false;
                }
                if(this.$refs.teachSupportDetail.state = true){
                    this.$refs.teachSupportDetail.state = false;
                }
                this.$refs.teachSupportTable.$emit('vuetable:refresh')
            }
        }
    }


</script>
<style scoped>
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
</style>

